{% extends 'base.html' %}
{% load static %}

{% block title %}日志查看器 - CFS Web System{% endblock %}

{% block extra_css %}
<style>
.log-container {
    background-color: #1e1e1e;
    color: #d4d4d4;
    font-family: 'Courier New', monospace;
    padding: 15px;
    border-radius: 5px;
    max-height: 600px;
    overflow-y: auto;
}
.log-line {
    margin: 2px 0;
    white-space: pre-wrap;
}
.log-error {
    color: #f44336;
}
.log-warning {
    color: #ff9800;
}
.log-info {
    color: #2196f3;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">日志查看器</h5>
                    <div>
                        <button class="btn btn-sm btn-primary" onclick="refreshLogs()">刷新</button>
                        <button class="btn btn-sm btn-secondary" onclick="clearLogs()">清空</button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div id="log-container" class="log-container">
                        <div class="text-center text-muted p-3">
                            <i class="fas fa-spinner fa-spin"></i> 加载日志中...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function refreshLogs() {
    fetch('{% url "analytics:ajax_log_data" %}')
        .then(response => response.json())
        .then(data => {
            const container = document.getElementById('log-container');
            if (data.success) {
                container.innerHTML = data.logs.map(log => 
                    `<div class="log-line log-${log.level.toLowerCase()}">${log.message}</div>`
                ).join('');
            } else {
                container.innerHTML = '<div class="text-danger p-3">加载日志失败</div>';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            document.getElementById('log-container').innerHTML = 
                '<div class="text-danger p-3">加载日志时发生错误</div>';
        });
}

function clearLogs() {
    document.getElementById('log-container').innerHTML = 
        '<div class="text-muted p-3">日志已清空</div>';
}

// 页面加载时自动刷新日志
document.addEventListener('DOMContentLoaded', function() {
    refreshLogs();
    // 每30秒自动刷新
    setInterval(refreshLogs, 30000);
});
</script>
{% endblock %}